<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="perm" uri="/WEB-INF/tld/perm.tld"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<script>
	var ctx = "${ctx}";
</script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加文章</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
	<meta http-equiv="expires" content="Wed, 26 Feb 209908:21:57 GMT"> 
   <link href="${ctx}/static/css/bootstrap.min.css?v=${static_version}" rel="stylesheet" />
	<link href="${ctx}/static/css/font-awesome.min.css" rel="stylesheet" />
	<link href="${ctx}/static/css/animate.min.css?v=${static_version}" rel="stylesheet" />
	<link href="${ctx}/static/css/style.min.css?v=${static_version}" rel="stylesheet" />
	<link href="${ctx}/static/css/common.css?v=${static_version}" rel="stylesheet" />
	<link href="//at.alicdn.com/t/font_9x03jhokyws9vn29.css" rel="stylesheet">
	<!-- 插件样式  -->
	<link href="${ctx}/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
	<link href="${ctx}/static/css/plugins/webuploader/webuploader.css" rel="stylesheet" />
	<link href="${ctx}/static/css/plugins/markdown/bootstrap-markdown.min.css" rel="stylesheet" />
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content  animated fadeInRight">
	<div class="ibox float-e-margins">
	   <div class="ibox-title">
        <h5>添加文章<small></small></h5>
	  </div>
	   <div class="ibox-content">
		<form action="${ctx}/article/article_addorUpdate" method="POST"
			class="form form-horizontal" id="form-u_article-add"
			onsubmit="before_submit()">
			<input type="hidden" name="id" value="${article.id}" /> <input
			type="hidden" id="article_type" name="article_type"
			value="${article.article_type}" />

			<%-- <div class="form-group">
				<label class="col-sm-2 control-label">自媒体：</label>
				<div id="cat_select_div" class="formControls col-xs-8 col-sm-5">
					<select name="wemediaid" class="form-control">
						<option value="-1">请选择自媒体</option>
						<c:forEach items="${wemedialist}" var="wemedia">
						<option <c:if test="${article.org_id==wemedia.id}">selected="selected"</c:if> value="${wemedia.id}">${wemedia.media_title}</option>
					</c:forEach>
				</select>
			</div>
		</div> --%>

		<div class="form-group">
			<label class="col-sm-2 control-label">标题：</label>
			<div class="formControls col-xs-8 col-sm-5">
				<input type="text" class="form-control" value="${article.title}"
				placeholder="" id="" name="title" datatype="*" nullmsg="不能为空">
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-2 control-label">分类：</label>
			<div id="cat_select_div" class="formControls col-xs-8 col-sm-5">
				<select name="cate_id" class="form-control" datatype="n">
					<option value="">选择分类</option>
					<c:forEach items="${article_cates}" var="cate">
					<option
					<c:if test="${article.cate_id==cate.id}">selected="selected"</c:if>
					value="${cate.id}">${cate.cate_name}</option>
				</c:forEach>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">标签：</label>
		<div id="insert3" class="formControls col-xs-8 col-sm-5">
			<div style="line-height: 28px;">
				<c:forEach items="${article_labs}" var="label">
				${label.label_name}:
				<c:forEach items="${label.childLabel}" var="clabel">
				<input
				<c:if test="">checked="checked"</c:if>
				type="checkbox" name="label" value="${clabel.label_name}">&nbsp;${clabel.label_name}&nbsp;&nbsp;
			</c:forEach>
			<br />
		</c:forEach>
	</div>
</div>
</div>

<!-- 获取图片地址-->
	<div class="ibox-content">
<div class="form-group">
	<input type="hidden" id="img1" name="img1" value="${article.img1}" />
	<label class="col-sm-2 control-label">缩略图1：</label>
	<div class="formControls col-xs-8 col-sm-5">
		<div class="uploader-thum-container">
			<div id="fileList" class="uploader-list">
				<c:if test="${!empty article.img1}">
					<div class="file-item thumbnail upload-state-done">
						<img style="width:200px;height:200px;" src="${article.img1}" />
						<div class="info"></div>
					</div>
				</c:if>
			</div>
			<div class="col-sm-10">
		<div  class="col-sm-2 m-l-n"  >
							<a id="iconbutton"><i class="iconfont icon-plus1"></i></a>						
							<br/>尺寸：380px *380px<br/>格式：JPG						
						</div>
		</div>
		</div>
	</div>
</div>

<!-- 获取图片地址-->
<div class="form-group">
	<input type="hidden" id="img2" name="img2" value="${article.img2}" />
	<label class="col-sm-2 control-label">缩略图2：</label>
	<div class="formControls col-xs-8 col-sm-5">
		<div class="uploader-thum-container">
			<div id="fileList2" class="uploader-list">
				<c:if test="${!empty article.img2}">
					<div class="file-item thumbnail upload-state-done">
						<img style="width:200px;height:200px;" src="${article.img2}" />
						<div class="info"></div>
					</div>
				</c:if>
			</div>
			
			<div class="col-sm-10">
		<div  class="col-sm-2 m-l-n">
							<a id="filePicker2"><i class="iconfont icon-plus1"></i></a>						
							<br/>尺寸：380px *380px<br/>格式：JPG						
						</div>
		</div>
		</div>
	</div>
</div>

<!-- 获取图片地址-->
<div class="form-group">
	<input type="hidden" id="img3" name="img3" value="${article.img3}" />
	<label class="col-sm-2 control-label">缩略图3：</label>
	<div class="formControls col-xs-8 col-sm-5">
		<div class="uploader-thum-container">
			<div id="fileList3" class="uploader-list">
				<c:if test="${!empty article.img3}">
					<div class="file-item thumbnail upload-state-done">
						<img style="width:200px;height:200px;" src="${article.img3}" />
						<div class="info"></div>
					</div>
				</c:if>
			</div>
			<div class="col-sm-10">
		<div  class="col-sm-2 m-l-n">
							<a id="filePicker3"><i class="iconfont icon-plus1"></i></a>						
								<br>尺寸：380px *380px<br>格式：PNG						
						</div>
		</div>
		</div>
	</div>
</div>
</div>
<div class="form-group">
	<label class="col-sm-2 control-label">描述：</label>
	<div class="formControls col-xs-8 col-sm-5">
		<input type="text" required class="form-control" placeholder="" id=""
		name="description" datatype="*" value="${article.description}"
		nullmsg="不能为空">
	</div>
</div>

<div class="form-group">
	<!--提交前获取编辑器内容-->
	 <label
	class="col-sm-2 control-label">内容：</label>
	<div class="col-sm-8">
					<textarea name="content" data-provide="markdown" rows="5" class="textarea"
						placeholder="说点什么...最少输入10个字符...最多输入200个字符" datatype="*0-200" dragonfly="true"
						nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)">${article.content}</textarea>
				</div>
</div>

<%-- <div class="form-group">
	<label class="col-sm-2 control-label">作者：</label>
	<div class="formControls col-xs-8 col-sm-5">
		<input type="text" class="input-text" value="${article.author}"
		placeholder="" id="" name="author" datatype="*" nullmsg="不能为空">
	</div>
</div> --%>

<div class="form-group">
	<label class="col-sm-2 control-label"></label>
	<div class="formControls col-xs-8 col-sm-5">
		<button onClick="u_article_save_submit();"
		class="btn btn-primary radius" type="submit" onclick="return clicked();">保存并提交</button>
					<!-- <button onClick="layer_close();" class="btn btn-default radius"
					type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button> -->
				</div>
			</div>
		</form>
	</div>
</div>
</div>
</div>

<script src="${ctx}/static/js/jquery.min.js"></script>
	<script src="${ctx}/static/js/bootstrap.min.js"></script>

	<!-- 插件脚本 -->
	<script src="${ctx}/static/js/plugins/layer/layer.js"></script>	
	<script src="${ctx}/static/js/jquery.form.js"></script>
	<script src="${ctx}/static/js/plugins/webuploader/webuploader.min.js"></script>
	<script src="${ctx}/static/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx}/static/js/Validform/5.3.2/Validform.min.js"></script>
	<script src="${ctx}/static/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="${ctx}/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>	
	<script type="text/javascript" src="${ctx}/static/js/plugins/markdown/markdown.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/plugins/markdown/to-markdown.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/plugins/markdown/bootstrap-markdown.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/plugins/markdown/bootstrap-markdown.zh.js"></script>
    <script type="text/javascript" charset="utf-8"src="${ctx}/static/js/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"src="${ctx}/static/js/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript">
	function u_article_save_submit(){
	var status = ${member.verify_media};
	//alert(status);
	if( status == 1){
		$("#form-u_article-add").Validform({
			tiptype:2,
			ajaxPost:true,
			callback:function(form){
				var index = parent.layer.getFrameIndex(window.name);
					if (index){//关闭弹出层
						parent.$('.btn-refresh').click(); 
						parent.layer.close(index);
						layer.msg('操作失败', {icon:5,time:1000});
					}else{//单独的页面
						parent.$('.btn-refresh').click();
						layer.msg('操作成功', {icon:6,time:1000});
						location.href = "${ctx}/article/webarticlelist";
						
					}
				}
			});
		return true;
		}else{
			alert("您还不是认证的自媒体，无法进行该操作！");
			history.go(0); 
		}
	}

		//初始化Ueditor
		$(function() {
			var ue = UE.getEditor('editor');

			ue.ready(function() {
				var art_content = $("#content").val();
				ue.setContent(art_content);
			})
			
			/*缩略图上传*/
			var $list = $('#fileList'),
			$list2 = $('#fileList2'),
			$list3 = $('#fileList3'),
			ratio = window.devicePixelRatio || 1,
			thumbnailWidth = 100 * ratio,
			thumbnailHeight = 100 * ratio,
			uploader,uploader2,uploader3;

			uploader = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '${ctx}/file/uploadPic',
				pick: '#iconbutton',
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader.on( 'fileQueued', function( file ) {
				var $li = $(
					'<div id="' + file.id + '" class="file-item thumbnail">' +
					'<img>' +
					'<div class="info">' + file.name + '</div>' +
					'</div>'
					),
				$img = $li.find('img');

				$list.html( $li );
				uploader.makeThumb( file, function( error, src ) {
					if ( error ) {
						$img.replaceWith('<span>不能预览</span>');
						return;
					}

					$img.attr( 'src', src );
				}, thumbnailWidth, thumbnailHeight );
			});

			uploader.on( 'uploadSuccess', function(file, response) {
				$( '#'+file.id ).addClass('upload-state-done');
				$("#img1").val(response.datas);
			});

			uploader.on( 'uploadError', function( file ) {
				var $li = $( '#'+file.id ),
				$error = $li.find('div.error');
				if ( !$error.length ) {
					$error = $('<div class="error"></div>').appendTo( $li );
				}

				$error.text('上传失败');
			});

			uploader.on( 'uploadComplete', function( file ) {
				$( '#'+file.id ).find('.progress').remove();
			});

			/*图片*/
			uploader2 = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '${ctx}/file/uploadPic',
				pick : '#filePicker2',
				accept : {
					title : 'Images',
					extensions : 'gif,jpg,jpeg,bmp,png',
					mimeTypes : 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader2
			.on(
				'fileQueued',
				function(file) {
					var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
						+ '<img>'
						+ '<div class="info">'
						+ file.name + '</div>' + '</div>'), $img = $li
					.find('img');

					$list2.html($li);
					uploader2.makeThumb(file, function(error,
						src) {
						if (error) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr('src', src);
					}, thumbnailWidth, thumbnailHeight);
				});

			uploader2.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				$("#img2").val(response.datas);
			});

			uploader2.on('uploadError', function(file) {
				var $li = $('#' + file.id), $error = $li.find('div.error');
				if (!$error.length) {
					$error = $('<div class="error"></div>').appendTo($li);
				}

				$error.text('上传失败');
			});

			uploader2.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').remove();
			});
			
			/*图片*/
			uploader3 = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '${ctx}/file/uploadPic',
				pick : '#filePicker3',
				accept : {
					title : 'Images',
					extensions : 'gif,jpg,jpeg,bmp,png',
					mimeTypes : 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader3
			.on(
				'fileQueued',
				function(file) {
					var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
						+ '<img>'
						+ '<div class="info">'
						+ file.name + '</div>' + '</div>'), $img = $li
					.find('img');

					$list3.html($li);
					uploader3.makeThumb(file, function(error, src) {
						if (error) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr('src', src);
					}, thumbnailWidth, thumbnailHeight);
				});

			uploader3.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				$("#img3").val(response.datas);
			});

			uploader3.on('uploadError', function(file) {
				var $li = $('#' + file.id), $error = $li.find('div.error');
				if (!$error.length) {
					$error = $('<div class="error"></div>').appendTo($li);
				}

				$error.text('上传失败');
			});

			uploader3.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').remove();
			});

		});

		function before_submit() {
			//获取内容
			var ue = UE.getEditor('editor');
			var editor_content = ue.getContent();
			$("#content").val(editor_content);
			//
			return false;
		}
		
	</script>
</body>
</html>

